<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/public/css :: common_css(~{::title},~{::link})">
    <title>Topic Message - KafkaEagle</title>
    <link th:href="@{/media/css/plugins/select2/select2.min.css}" rel="stylesheet"/>
    <link th:href="@{/media/css/public/dataTables.bootstrap.min.css}" rel="stylesheet" />
</head>
<style>
.CodeMirror {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-left: 1px solid #ddd;
}
</style>
<body>
<nav th:replace="/public/navbar :: common_navbar"></nav>
	<div id="wrapper">
		<div id="page-wrapper">
			<div class="row">
				<div class="col-lg-12">
					<h1 class="page-header">
						Topic <small>message</small>
					</h1>
				</div>
				<!-- /.col-lg-12 -->
			</div>
			<!-- /.row -->
			<div class="row">
				<div class="col-lg-12">
					<div class="alert alert-info alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        <i class="fa fa-info-circle"></i>
                        Sample SQL query:
                        <strong>select * from "ke_topic" where "partition" in (0,1,2) limit 10</strong><br/>
                        <i class="fa fa-info-circle"></i>
                        AutoComplete: Press
                        <strong>Alt and /</strong>.
                    </div>
				</div>
			</div>
			<!-- /.row -->
			<div class="row">
				<div class="col-lg-12">
					<div class="panel panel-default">
						<div class="panel-heading">
							<i class="fa fa-tasks fa-fw"></i> Kafka Query SQL
							<div class="pull-right"></div>
						</div>
						<!-- /.panel-heading -->
						<div class="panel-body">
                            <div id="ke_sql_query">
                                <form>
                                    <textarea id="code" name="code"></textarea>
                                </form>
                                <a id="query" class="btn btn-success">Query</a>
                            </div>

						</div>
						<!-- /.panel-body -->
					</div>
				</div>
				<!-- /.col-lg-4 -->
			</div>
			<!-- /.row -->
			<div class="row">
				<div class="col-lg-12">
					<div class="panel panel-default">
						<div class="panel-heading">
							<i class="fa fa-comments fa-fw"></i> Tasks Job Info
							<div class="pull-right"></div>
						</div>
						<!-- /.panel-heading -->
						<div class="panel-body">
							<div>
                                <ul id="result_tab" class="nav nav-tabs">
                                    <!-- 日志选项卡 -->
                                    <li class="active"><a href="#log_textarea" data-toggle="tab">Logs</a></li>

                                    <!-- kafka消息选项卡 -->
                                    <li><a href="#result_textarea" data-toggle="tab">Result</a></li>

                                    <!-- KSQL历史选项卡 -->
                                    <li><a href="#ksql_history_textarea" data-toggle="tab">History</a></li>
                                </ul>
							</div>
                            <div class="tab-content">
                                <!-- KSQL查询日志 -->
                                <div id="log_textarea" class="tab-pane fade in active">
                                    <form>
                                        <textarea id="log_info" name="log_info"></textarea>
                                    </form>
                                </div>
                                <!-- Kafka 消息 -->
                                <div id="result_textarea" class="tab-pane fade">
                                    <div class='panel-body'>
                                        <table id='result_children' class='table table-bordered table-hover'
                                               width='100%'>
                                            <thead>
                                            <tr>
                                                <th>MessageID</th>
                                                <th>partition</th>
                                                <th>offset</th>
                                                <th>msg</th>
                                            </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>

                                <!-- KSQL 查询历史 -->
                                <div id="ksql_history_textarea" class="tab-pane fade">
                                    <div id="ksql_history_result_div">
                                        <div id="ksql_history_result0">
                                            <table id="ksql_history_result" class="table table-bordered table-condensed"
                                                   width="100%">
                                                <thead>
                                                <tr>
                                                    <th>ID</th>
                                                    <th>User</th>
                                                    <th>Host</th>
                                                    <th>KSQL</th>
                                                    <th>Status</th>
                                                    <th>Spent</th>
                                                    <th>Created</th>
                                                </tr>
												</thead>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

            <!--KSQL详情弹出框-->
            <div class="modal fade" aria-labelledby="keModalLabelModify"
				aria-hidden="true" id="ke_sql_query_detail" tabindex="-1"
				role="dialog">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" type="button" data-dismiss="modal">×</button>
							<h4 class="modal-title" id="keModalLabelModify">Detail</h4>
						</div>
						<!-- /.row -->
						<fieldset class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Content</label>
                                <div class="col-sm-9">
									<textarea id="ke_sql_query_content" name="ke_sql_query_content"
                                              class="form-control" readonly="readonly" rows="3"></textarea>
                                </div>
                            </div>
						</fieldset>

						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal">Cancle</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /#page-wrapper -->
	</div>
<div th:replace="/public/script :: common_js(~{::script})">
    <script th:src="@{/media/js/plugins/magicsuggest/magicsuggest.js}" type="text/javascript"></script>
    <script th:src="@{/media/js/plugins/tokenfield/bootstrap-tokenfield.js}" type="text/javascript"></script>
    <script th:src="@{/media/js/plugins/codemirror/codemirror.js}" type="text/javascript"></script>
    <script th:src="@{/media/js/plugins/codemirror/sql.js}" type="text/javascript"></script>
    <script th:src="@{/media/js/plugins/codemirror/show-hint.js}" type="text/javascript"></script>
    <script th:src="@{/media/js/plugins/codemirror/sql-hint.js}" type="text/javascript"></script>
    <script th:src="@{/media/js/main/topic/msg.js}" type="text/javascript"></script>
    <script th:src="@{/media/js/main/topic/ksql.history.js}" type="text/javascript"></script>
    <script th:src="@{/media/js/plugins/datatables/jquery.dataTables.min.js}"></script>
    <script th:src="@{/media/js/plugins/datatables/dataTables.bootstrap.min.js}"></script>
</div>
</body>
</html>
